<template>
	<view class="containt">
		<u-navbar leftText="返回"  title="店铺" :safeAreaInsetTop="true" :placeholder='true'>
		  <template #left>
		    <view class="u-nav-slot">
		      <!-- <u-icon name="home" size="30"></u-icon> -->
		    </view>
		  </template>
		</u-navbar>
		<u-sticky offset-top="160" bgColor="#fff">
			 <u-tabs
				:list="listsite"
				lineWidth="20"
				lineHeight="7"
				:current='0'
				:keyName="'label'"
				@click="handleSite"
				:lineColor="`url(${lineBg}) 100% 100%`"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 46px;"
				>
			</u-tabs>
		</u-sticky>
		<view class="content" v-if="storeList.length>0">
			
				<view class="storebox" v-for="(item,index) in storeList">
					<image v-if="item.shopPic" :src="`${baseimgURL}${item?.shopPic.split(',')[0]}`" mode="aspectFill" style="width: 100%;height: 100%;border-radius: 22rpx;"></image>
					<image v-else src="" alt='店铺图片跑丢了 ' mode="aspectFill" style="width: 100%;height: 100%;border-radius: 22rpx;"></image>
					<view class="botstore flex flexYCenter flexCenterSpaceBetween">
						<view class="botstoreInfo">
							<view class="">{{item.shopCity||'-'}} {{item.shopName||'-'}}</view>
							<view class="">{{item.shopAddr||'-'}}</view>
						</view>
						<view class="roadLine" @click="goOpenMap(item)">路线</view>
					</view>
				</view>
		</view>
		<!-- open-type="contact" -->
		<button class="serverCustomer" @click="handleopen(true)">
			<image class="img" src="@/static/img/customtype.png" mode=""></image>
		</button>
		<u-modal :show="show" :title="title" :showConfirmButton='false' :showCancelButton="false" :closeOnClickOverlay="true" @close="handlecancel">
			<view class="slot-content w100">
				<view class="modelTitle" style="">
					周一至周日
				</view>
				<view class="modelTitle" style="">
					10:00 - 22:00
				</view>
				<view class="flex flexCenterSpaceBetween contentHandle">
					<button class="butt flex " @click="makePhoneCall">
						<u-icon name="phone" color="#2979ff" size="28"></u-icon>
						<view class="">
							客服热线
						</view>
					</button>
					<button  class="butt flex" open-type="contact">
						<u-icon name="chat" color="#2979ff" size="28"></u-icon>
						<view class="">
							在线客服
						</view></button>
				</view>
			</view>
		</u-modal>
	</view>
	
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { listOptionsSite, recycleShopList } from "@/utils/api/store";
	import { onLoad, onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app";
	import { baseimgURL } from '@/config'
	const lineBg = "";
	const listsite = ref([])
	const type = 'center'
	const show = ref(false)
	const title = ref('客户服务')
	const content = ref('周一至周日,10:00 - 22:00')
	const phone = ref()
	const storeList = ref([])
	const pageNum = ref(1)
	const cityValue = ref()
	// const defaultCity = ref()
	//地址列表 listOptionsSite
	onLoad(async () => {
	  await getsitlist()
	  let allhomesetting = JSON.parse(uni.getStorageSync('allhomesetting'))
	  phone.value = allhomesetting[1].value
	});
	onPullDownRefresh(() => {
		console.log("下拉刷新")
	})
	onReachBottom(() => {
		console.log("上拉加载更多")
		pullUp()
	})
	const pullUp = () =>{
		pageNum.value = pageNum.value + 1
		getRecycleShopList()
	}
	const initPage = () =>{
		pageNum.value = 1
		storeList.value = []
	}
	// 获取地址列表
	const getsitlist = async() => {
	  const typeCode = 'city'
	  const { data } = await listOptionsSite({ typeCode });
	  const temp = [{
		  label:'全部',
		  value:'quanbu'
	  }]
	  listsite.value = [ ...temp, ...data]
	  //获取默认城市店铺
	  handleSite(listsite.value[0])
	};
	//选中城市发生变化函数
	const handleSite =(item:any)=>{
		initPage()
		cityValue.value = item.value
		getRecycleShopList()
	}
	//获取城市店铺
	const getRecycleShopList = async()=>{
		const data = {
			pageNum: pageNum.value,
			pageSize: 10,
			typeCode: 'recycleShop',
			// query: {shopCity: cityValue.value},
		}
		if(cityValue.value === 'quanbu'){
			let tempquery = {}
			data.query = tempquery
		}else{
			let tempquery = {
				shopCity : cityValue.value
			}
			data.query = tempquery
		}
		const res = await recycleShopList( data );
		storeList.value = [...storeList.value, ...res.data.list]
	}
	const makePhoneCall = () =>{
		uni.makePhoneCall({
			phoneNumber: phone.value //仅为示例
		});
	}
	const handlecancel = () =>{
		show.value = !show.value
	}
    const handleopen = (status: boolean) =>{
		show.value = status
	}
	const goOpenMap = async(item: object) =>{
		console.log('location',item)
		// return
		let location = null;
			try {
			  // location = await getWXLocation();
			  console.log(location,'location',item,item?.lonlat.split(','))
			  uni.openLocation({
				latitude: parseFloat(item?.lonlat.split(',')[1]) , // 纬度，范围为-90~90，负数表示南纬
				longitude: parseFloat(item?.lonlat.split(',')[0]), // 经度，范围为-180~180，负数表示西经
				name:item?.shopAddr,
				scale: 15, // 缩放比例          
			  })
			}catch(err){
			  console.log(err,'err')
			  uni.showModal({
					cancelText: '取消',
					confirmText: '前往设置',
					content: '获取权限失败，需要获取您的地理位置才能为您提供更好的服务！是否授权获取地理位置？',
					editable: false,
					showCancel: true,
					title: '温馨提示',
					success: (res) => {
					  console.log(res+'res')
					  // wx.openSetting()
					  uni.openSetting()
					},
					fail: (err) => {
						console.log(err+'err')
						// uni.openSetting()
						uni.showToast({
							title:'您可通过我们的门店地址自行前往',
							icon:'none',
							mask:true,
						})
					},
				})
			  return
			}
	}
	 const getWXLocation = () =>{
	    uni.showLoading({
	      title: '定位中...',
	      mask: true,
	    })
	    return new Promise((resolve, reject) => {
	      let _locationChangeFn = (res) => {
	        resolve(res);
	        uni.hideLoading()
	        uni.offLocationChange(_locationChangeFn)
			uni.stopLocationUpdate({
				success: (res) => {
					console.log('stopLocationUpdate', res)
				}
			})
	      }
	      uni.startLocationUpdate({
	        success: (res) => {
	          uni.onLocationChange(_locationChangeFn)
	        },
	        fail: (err) => {
	          console.log('获取当前位置失败', err)
	          uni.hideLoading()
	          reject()
	        }
	      })
	    })
	  }
</script>
<style lang="scss" scoped>
	.content{
		padding: 22rpx 22rpx 62rpx;
		background: #F4F4F4;
	}
	.storebox{
		width: 707rpx;
		height: 661rpx;
		margin-bottom: 22rpx;
		border-radius: 22rpx;
		position: relative;
	}
	.botstore{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 23rpx 28rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
		border-radius: 0rpx 0rpx 22rpx 22rpx;
	}
		
	.botstoreInfo{
		
		:nth-child(1){
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		:nth-child(2){
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.roadLine{
		//二货在干啥, 
		background: #953B82;
		border-radius: 50rpx;
		font-size: 27rpx;
		font-weight: 400;
		color: #FFFFFF;
		padding: 8rpx 38rpx;
		text-align: center;
		line-height: 50rpx;
		height: 50rpx;
		min-width: 68rpx;
	}
	.serverCustomer{
		position: fixed;
		right: 30rpx;
		bottom: 190rpx;
	    background: transparent;
		width: 130rpx;
		height: 130rpx;
		padding: 6rpx;
		.img{
			width: 118rpx;
			height: 118rpx;
		}
	}
	.serverCustomer::after{ border: none;} 
	.modelTitle{
		font-size: 24rpx;font-weight: 400;color: #000000;text-align: center;
	}
	.butt{
		background: transparent;
		border-radius: 88rpx;
		border: 1rpx solid #953B82;
		padding: 12rpx 65rpx;
		// box-sizing: border-box;
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #212121;
		
	}
	.contentHandle{
		margin-top: 56rpx;
	}
	// .butt::after{ border: none;} 
	.mask{
		background: #D8D8D8;
		border-radius: 22rpx;
	}
</style>
